<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>图形元素从一种状态变化到另一种状态，叫做过度</li>
		<li>调用d3<strong>选择集的transition()</strong>，能讲选择集变为过度对象，一般不直接用d3.transition()</li>
		<li>transition.delay([delay])</li>
		<li>transition.duration([duration])</li>
		<li>transition.ease(value[,arguments])</li>
		<li>delay、duration默认为250ms</li>
		<li>transition.attr(name,value)</li>
		<li>transition.attrTween(name,tween) - 讲属性name使用插值函数tween()进行过度</li>
		<li>transition.style(name,value[,priority]) - 并无卵用</li>
		<li>transition.text(value)</li>
		<li>transition.tween(name,fn) - 将属性name按照函数fn进行过度，attrTween()和styleTween()都是用此函数实现的</li>
		<li>transition.remove() - 元素淡出的时候使用--过度结束，删除元素</li>
	</ul>
	<div class="transition">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".transition").append('svg').attr({"width":width,"height":height});

		// svg.append("rect").attr({"fill":"steelblue","x":10,"y":10,"width":100,"height":30})
		// 		.transition().delay(500).duration(2000).ease("bounce")
		// 		.attr("width",800).attr("fill","#f90")

		// console.log(svg.transition())

		//插值函数
		var rect = svg.append("rect").attr({"fill":"steelblue","x":10,"y":10,"width":100,"height":30})
		var rectTran = rect.transition().duration(2000).attrTween("width",function(d,i,a) { 
			return function(t) {  //d被绑定的数据，i是索引号，a是属性的初始值，function(t)是插值函数，t的范围是[0,1]
				return Number(a) + t * 300;
			}
		})

		//transition.style()
		// svg.append("rect").attr({"fill":"steelblue","x":10,"y":10,"width":100,"height":30})
		// 		.transition().delay(500).duration(2000)
		// 		.attr("width",800).style("fill","red")

		//transition.text()

		var text = svg.append("text").attr({"fill":"red","x":100,"y":10,"dy":"1.2em","text-anchor":"end"}).text(100);
		var initx = text.attr("x");
		var initText = text.text();

		var textTran = text.transition().duration(2000)
												.tween("text",function() {
														return function(t) {
																return d3.select(this).attr("x",Number(initx) + t * 300).text(Math.floor(Number(initText) + t * 300))
												}
		})
		textTran.remove();
		 rectTran.remove()
	</script>
</body>
</html>